<template>
  <div>
      <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'teleport',
  props: {
      to: {
          type: String,
          require: true
      },
  },
  mounted() {
    const toEl = document.querySelector(this.to)
    if (toEl) {
        this.$nextTick(() => {
            toEl.appendChild(this.$el)
        })
    }
  },
  destroyed() {
    const toEl = document.querySelector(this.to)
    if (toEl) {
        toEl.removeChild(this.$el)
    }
  }
}
</script>